<!-- 颜色信息 -->
<template>
  <div>
    <div class="title pl0">
      <h3>颜色信息</h3>
      <el-button type="text" v-if="isDisable && isLocked == '待锁定'" @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <el-table
      :data="formData.productPrintingColorList"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column
        prop="school"
        width="200"
        align="center"
        label="颜色名称"
      >
        <template slot-scope="scope">
          <customInput
            :key="scope.row.colorCode"
            v-model="scope.row.colorCode"
            v-if="!isDisable"
            :sourceData="sourceData"
            @handleSaveSelect="handleSaveColorSelect"
            @change="handleInputChange(scope.row, scope.$index, $event)"
          />
          <span v-else-if="sourceData.length">{{
            querySelectName(sourceData, scope.row.colorCode, "label", "value")
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="school"
        width="150"
        align="center"
        label="颜色类型"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.colorType"
            filterable
            v-if="!isDisable"
            placeholder="请选择颜色类型"
            size="small"
            @change="handlePriceChange(scope.row, scope.$index, $event)"
          >
            <el-option label="普通" :value="1" />
            <el-option label="专色" :value="2" />
          </el-select>
          <span v-else>
            {{ format(scope.row.colorType) }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="colorReference"
        width="150"
        align="center"
        label="参考"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.colorReference"
            v-if="!isDisable"
            placeholder="请选择参考"
            filterable
            @change="handlePriceChange(scope.row, scope.$index, $event)"
            size="small"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in colorReferenceList"
              :key="index"
            />
          </el-select>
          <span v-else-if="colorReferenceList.length">{{
            querySelectName(
              colorReferenceList,
              scope.row.colorReference,
              "label",
              "value"
            )
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="school" align="center" label="备注">
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            v-model="scope.row.colorRemark"
            placeholder="请输入内容"
            size="small"
          />
          <span v-else>{{ scope.row.colorRemark }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100px"
        fixed="right"
        align="center"
        v-if="!isDisable"
      >
        <template slot-scope="scope">
          <el-button v-if="formData.productPrintingColorList.length-1 != scope.$index" type="text" @click="handleCopyRow(scope.row, scope.$index)"
            >复制</el-button
          >
          <el-button
          v-if="formData.productPrintingColorList.length-1 != scope.$index"
            type="text"
            @click="handleDeleteRow(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button size="small" class="ml16" type="primary" @click="handleSave"
        >保存</el-button
      >
    </div>
  </div>
</template>

      <script>
import customInput from "@/components/customInput";
import { querySelectName } from "@/utils";
export default {
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isLocked:{
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    formModel: {
      handler(newVal, oldVal) {
        this.formData.productPrintingColorList =
          newVal.productPrintingColorList;
          if(this.formData.productPrintingColorList.length>0){
            this.formData.productPrintingColorList.forEach((item)=>{
              this.sourceData.forEach((x)=>{
                if(item.colorCode == x.colorCode){
                  item.colorType = x.colorType
                }
              })
            })
          }
      },
    },
  },
  components: {
    customInput,
  },
  data() {
    return {
      querySelectName,
      formData: {
        productCode: this.productCode,
        productPrintingColorList: [],
      },
      sourceData: [], // 刮开文字颜色列表
      isDisable: true,
      rowIndex: 0,
      colorReferenceList: [
        {
          label: "彩稿",
          value: 1,
        },
        {
          label: "样标",
          value: 2,
        },
        {
          label: "封样",
          value: 3,
        },
      ],
    };
  },
  created() {
    this.getSelectColorList();
  },
  methods: {
    //表格选择事件
    handlePriceChange(row, index, event) {
      if (index == this.formData.productPrintingColorList.length - 1) {
        this.formData.productPrintingColorList.push({
          productPrintingColorID: 0,
          productPrintingColorCode: "",
          productCode: this.productCode,
          colorType: '',
          colorCode: "",
          colorReference: "",
          colorRemark: "",
        });
      }
    },

    //删除
    handleDeleteRow(row, index) {
      this.formData.productPrintingColorList.splice(index, 1);
    },

    //复制
    handleCopyRow(row, index) {
      this.formData.productPrintingColorList.splice(
        index,
        0,
        JSON.parse(JSON.stringify(row))
      );
      this.$forceUpdate()
      this.$set( this.formData.productPrintingColorList, this.formData.productPrintingColorList, this.formData.productPrintingColorList )
    },

    handleInputChange(row, index, e) {
      this.rowIndex = index;
      if (index == this.formData.productPrintingColorList.length - 1) {
        this.formData.productPrintingColorList.push({
          productPrintingColorID: 0,
          productPrintingColorCode: "",
          productCode: this.productCode,
          colorType: '',
          colorCode: "",
          colorReference: "",
          colorRemark: "",
        })
      }
    },

    //保存新增颜色下拉数据
    handleSaveColorSelect(e) {
      const params = {
        useType: 2,
        colorType:
          this.formData.productPrintingColorList[this.rowIndex].colorType,
        colorName: e,
        colorValue: "",
        cmykValue: "",
        colorSort: 0,
        colorRemark: "",
      };
      this.$api.system.AddPrintingColor(params).then((res) => {
        this.$message.success('保存成功')
        this.getSelectColorList();
        this.formData.productPrintingColorList[this.rowIndex].colorCode = res
      });
    },

    //编辑
    handleEdit() {
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
        this.formData.productPrintingColorList.push({
        productPrintingColorID: 0,
        productPrintingColorCode: "",
        productCode: this.productCode,
        colorType:'',
        colorCode: "",
        colorReference: '',
        colorRemark: "",
      });
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    // handleSelectChange(row,index,event){
    //   console.log(row)
    //   console.log(index)
    //   console.log(event)
    //   this.formData.productPrintingColorList[index].colorCode = event.colorCode
    // },

    //保存
    handleSave() {
      let state = true
      let arr = JSON.parse(JSON.stringify(this.formData.productPrintingColorList))
      if(arr.length>1){
        arr.pop();
        arr.forEach((item, index) => {
          if(!item.colorCode){
            state = false
          }
        });
      }
      if(!state){
        this.$message.warning('请选择颜色名称')
        return
      }
      this.formData.productPrintingColorList.pop()
      this.$api.business
        .UpdateProductPrintingColor(this.formData)
        .then((res) => {
          let obj = {
            state: 3,
            productCode: this.productCode,
          };
          if(this.formModel.productColorDraftFileList.length>0){
            this.$api.business.UpdateProductState(obj).then((res) => {
            });
          }
          this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
          this.$message.success("保存成功");

          // setTimeout(()=>{
          //   this.getDetail(this.productCode);
          // },2000)
          this.isDisable = true;
        }).catch(()=>{
          this.formData.productPrintingColorList.push({
          productPrintingColorID: 0,
          productPrintingColorCode: "",
          productCode: this.productCode,
          colorType: '',
          colorCode: "",
          colorReference: "",
          colorRemark: "",
        });
        });
    },

    format(str){
      let name = ''
      if(str == 1){
        name = '普通'
      }else if(str == 2){
        name = '专色'
      }
      return name
    },

    //取消
    handleCancel(){
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.handleSave()
      }).catch(() => {
        this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
        this.getDetail(this.productCode);
        this.isDisable = true
      });
    },

    //获取详情
    getDetail(id) {
      const parmas = {
        queryBy: 2,
        queryValue: id,
      };
      this.$api.business.GetSingleProductByProductCode(parmas).then((res) => {
        this.formData.productPrintingColorList = res.productPrintingColorList
      });
      // this.$emit('init','')
    },

    //获取颜色名称
    getSelectColorList() {
      const params = {
        useType: 2,
        colorType: 0,
        likeWords: "",
      };
      this.$api.system.QueryPrintingColorDataList(params).then((res) => {
        res.forEach((item) => {
          item.label = item.colorName;
          item.value = item.colorCode;
        });
        this.sourceData = res;
      });
    },
  },
};
</script>

      <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}
</style>
